<include file="public/min-header"/>
<link href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>

<div class="wrapper">
  <include file="public/breadcrumb"/>
  <section class="content ">
    <!-- Main content -->
    <div class="container-fluid">

      <div class="panel panel-default">
        <div class="panel-body ">
          <!--表单数据-->
          <form method="post" id="handle_shop">

            <!--通用信息-->
            <div class="tab-content col-md-10">
              <div class="tab-pane active" id="tab_tongyong">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td class="col-sm-2"><span style="color:#F00;">*</span>套餐名称：</td>
                    <td class="col-sm-8">
                      <input type="text" class="form-control" name="packageName" placeholder="请输入套餐名称">
                    </td>
                  </tr>

                  <tr>
                    <td class="col-sm-2"><span style="color:#F00;">*</span>主营套餐：</td>
                    <td>
                      <select class="form-control" name="main_key" id="main_key" style="width: 200px">
                        <option value="">==请选择主营套餐==</option>
                        <volist name='package' id='po' key="k">
                          <option value="{$k}">{$po}</option>
                        </volist>
                      </select>&nbsp;&nbsp;
                      <select class="form-control" name="main_value" id="main_value" style="width: 200px">
                        <option value="">请选择</option>
                      </select>
                    </td>
                  </tr>

                  <tr>
                    <td class="col-sm-2"><span style="color:#F00;">*</span>搭配商品：</td>
                    <td id="article_list">
                      <select class="form-control" name="gear_key" id="gear_key" style="width: 200px">
                        <option value="">==请选择搭配商品==</option>
                        <volist name='package' id='po' key="k">
                          <option value="{$k}">{$po}</option>
                        </volist>
                      </select>&nbsp;&nbsp;
                      <select class="form-control" name="gear_value" id="gear_value" style="width: 200px">
                        <option value="">请选择</option>
                      </select>
                      <button class="btn btn-primary add-inputs" type="button">增加</button>
                    </td>

                  </tr>

                  <tr>
                    <td>套餐Logo：</td>
                    <td class="col-sm-8">
                      <div class="col-sm-4">
                        <input type="text" class="form-control" style="width:350px;margin-left:-15px;" name="logs" id="courseLogo" >
                      </div>
                      <div class="col-sm-4">
                        <input type="button" class="btn btn-default" onClick="GetUploadify(1,'courseLogo','course','')"  value="上传LOGO图"/>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td class="col-sm-2"><span style="color:#F00;">*</span>售价：</td>
                    <td class="col-sm-8">
                      <input type="text" class="form-control input-sm" name="price" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" >
                    </td>
                  </tr>

                  <tr>
                    <td class="col-sm-2"><span style="color:#F00;">*</span>折扣价：</td>
                    <td class="col-sm-8">
                      <input type="text" class="form-control input-sm" name="discountedPrice" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" >
                    </td>
                  </tr>

                  <tr>
                    <td class="col-sm-2">描述：</td>
                    <td class="col-sm-8">
                      <textarea class="form-control" id="describe"  name="describe" rows="10" cols="60"></textarea>
                    </td>
                  </tr>

                  </tbody>
                  <tfoot>
                  <tr>
                    <td></td>
                    <td class="text-right"><input class="btn btn-primary" type="button" onclick="shop_submit()" value="保存"></td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </form><!--表单数据-->
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  $('#main_key').click(function (){
    var main_key = $('#main_key option:selected').val();
    var str;

    if(main_key != ''){
      $.get("/mingteng/package/classification"+'?main_key='+main_key,function (res){
        $.each(res.data,function (index,item){
          str += '<option value="'+item.id+'">'+item.value+'</option>';
        })
        $("#main_value").html(str)
      });
    }else{
      $("#main_value").html(str)
    }
  });
  $('#gear_key').click(function (){
    var gear_key = $('#gear_key option:selected').val();
    var str;

    if(gear_key != ''){
      $.get("/mingteng/package/classification"+'?main_key='+gear_key,function (res){
        $.each(res.data,function (index,item){
          str += '<option value="'+item.id+'">'+item.value+'</option>';
        })
        $("#gear_value").html(str)
      });
    }else{
      $("#gear_value").html(str)
    }
  });
  let number = 2;
  var html2
  $(".add-inputs").click(function () {
   let arr = []
    $.get("/mingteng/package/packages",function (res){
      var data = res.data;
      for (x in data) {
        arr.push(data[x])
      }
      var option_html =  arr.map((item,index)=>{
        return ` <option value="${index+1}">${item}</option>`
      }).join("")
      let html = '<p id="in'+ number +'" style="margin-top: 5px">\n' +
              '                      <select class="form-control gear_key" name="gear_key" id="gear_key'+ number +'" style="width: 200px">\n' +
              '                        <option value="">==请选择搭配商品==</option>\n' +
              option_html +
              '                      </select>&nbsp;&nbsp;\n' +
              '                      <select class="form-control" name="gear_value" id="gear_value'+ number +'" style="width: 200px">\n' +
              '                        <option value="">请选择</option>\n' +
              html2 +
              '                      </select>\n' +
              '                      <button class="btn btn-primary del-input" data-value="'+ number +'" type="button">删除</button>\n' +
              '                    </p>';

      number++;
      $('#article_list').append(html);
    });

  })

  $(document).on("click",".del-input",function () {
    let key = $(this).data('value');
    $("#in"+key).remove();
  })

  $(document).on("change",".gear_key",function (e) {
    var gear_key = $(this).find("option:selected").val();
    let ids = $(this).next("select")[0].id
    if(gear_key != ''){
      $.get("/mingteng/package/classification"+'?main_key='+gear_key,function (res){
        html2 = ''
        $.each(res.data,function (index,item){
         html2 += '<option value="'+item.id+'">'+item.value+'</option>';
        })
        $("#" + ids).html(html2)
      });
    }else{
      $("#" + ids).html(html2)
    }
  });

  function shop_submit(){

    let packageName = $("input[name='packageName']").val();
    let main_key = $("#main_key option:selected").val();
    let main_value = $("#main_value option:selected").val();
    let logs = $("input[name='logs']").val();
    let describe = $('#describe').val();

    let gear_key = [];
    $("select[name='gear_key']").each(function (i,v) {
      gear_key.push(v.value);
    })
    let gear_value = [];
    $("select[name='gear_value']").each(function (i,v) {
      gear_value.push(v.value);
    })

    let price = $("input[name='price']").val();
    let discountedPrice = $("input[name='discountedPrice']").val();

    let data = {
      packageName:packageName,
      main_key:main_key,
      main_value:main_value,
      gear_key:gear_key,
      gear_value:gear_value,
      price:price,
      discountedPrice:discountedPrice,
      logs:logs,
      describe:describe
    };

    $.ajax({
      url:"{:url('package/doAdd')}",
      data:data,
      type:"post",
      success:function (res) {
        if(res.code == 200)
        {
          layer.msg(res.msg, {icon: 6,time:1500,shade: 0.1}, function(index){
            window.parent.location.reload();
          });
        }
        else
        {
          layer.msg(res.msg,{icon:5});
          return false;
        }

      }
    })

  }
</script>
</body>
</html>